// This creates a XMLRequest (ActiveXObject) to be sent to the server
var XmlReq;
// This page returns the XML Response for the selected choice
var AjaxServerPageName = "AjaxServer.aspx";

function CreateXmlReq()
{
	try
	{
		XmlReq = new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch(e)
	{
		try
		{
			XmlReq = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(oc)
		{
			XmlReq = null;
		}
	}
	if(!XmlReq && typeof XMLHttpRequest != "undefined")
	{
		XmlReq = new XMLHttpRequest();
	}
}

//This fucntion is to send the choice into the AJAX Server page for processing
function FetchDGContents()
{

	var selecteditem = document.Form1.DropDownList1.value;

alert(encodeURIComponent(selecteditem));

	//Starts displaying the Process Image table
	//imgtbl.style.visibility = 'visible';

	var requestUrl = "AjaxServerPageName" + "?Choice=" + encodeURIComponent(selecteditem);
	CreateXmlReq();


	if(XmlReq)
	{
		XmlReq.onreadystatechange = HandleResponse;
		XmlReq.open("GET", requestUrl,  true);
		XmlReq.send();
	}
}

function HandleResponse()
{
	if(XmlReq.readyState == 4)
	{
      alert("State now is : " + XmlReq.readyState)
		if(XmlReq.status == 200)
		{
        alert("Status now is:" + XmlReq.status)
		// Before filling new contents into the DataGrid, clear the cotents by calling this function
			ClearTable();
		// Fill the cleared Datagrid with new XML Reponse
			FillTable(XmlReq.responseXML.documentElement);
		// Hides the Process Image Table after displaying the contents
			//imgtbl.style.visibility = 'hidden';
		}
		else
		{
			alert("There was a problem retrieving data from the server."+ XmlReq.status );
		}
	}
else{
//alert(XmlReq.readystate)
}
}

//Fills the datagrid contents with the newly recieved Response content
function FillTable(scity)
{
	// Gets the response XML
	var auth = scity.getElementsByTagName("Sales");
	// Gets the table type content present in the Response XML and gets the data into a variable tbl
	var tbl = document.getElementById("DataGrid1").getElementsByTagName("tbody")[0];

	// Iterate through the table and add HTML Rows & contents into it.
	for(var i=0;i<auth.context.childNodes(0).parentNode.childNodes.length;i++)
	{
		// Create a HTML Row
		var row = document.createElement("TR");

		// Set the style
		row.setAttribute("className","text");
		//row.setAttribute("bgColor","#ECECEC");

		// Iterate thorugh the columns of each row
		for(var j=0;j<auth.context.childNodes(0).childNodes.length;j++)
		{
			// Create a HTML DataColumn
			var cell = document.createElement("TD");
			// Store the cotents we got from Response XML into the column
			cell.innerHTML = auth.context.childNodes(i).childNodes(j).text;
			// Append the new column into the current row
			row.appendChild(cell);
		}
		// Append the current row into the HTML Table(i.e DataGrid)
		tbl.appendChild(row)
	}
}

// Clearing the existing contents of the Datagrid
function ClearTable()
{
	var tbl = document.getElementById("DataGrid1").getElementsByTagName("tbody")[0];
	var row = tbl.rows.length
	for (var i=1,j=1;j<row;i++,j++)
	{
		if (tbl.rows.length == 2){i = 1;}
		tbl.deleteRow(i);
		if (tbl.rows.length == i) {i = 0;}
	}
}
